<template>
  <article
    class="flex overflow-hidden gap-5 justify-between p-8 rounded-lg bg-white bg-opacity-60 max-md:px-5 login-card"
    :class="className"
  >
    <div class="flex flex-col">
      <h3 class="text-2xl font-medium text-[#0064c8]">
        {{ title }}
      </h3>
      <a
        href="javascript:;"
        class="self-start mt-5 text-base text-zinc-800 hover:text-[#0064c8]"
        @click.prevent="$emit('click')"
      >
        {{ $t('homeText.login') }} &gt;&gt;
      </a>
    </div>
    <img
      :src="iconSrc"
      :alt="`${title} icon`"
      class="object-contain shrink-0 my-auto aspect-square w-[50px]"
    >
  </article>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'

// Define props with TypeScript interface
interface Props {
  title: string
  iconSrc: string
  className?: string
}

defineProps<Props>()

// Define emits
defineEmits<{
  (e: 'click'): void
}>()
</script>

<style lang="scss" scoped>
.login-card {
  backdrop-filter: blur(50px)
}
</style>
